<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="baidu-site-verification" content="code-UjJKh3jtOo">
  <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.5.0/styles/atom-one-dark.min.css">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <title>Tit1e</title>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2767111597631391" crossorigin="anonymous"></script>
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Tit1e" type="application/atom+xml">
</head>

<body class="dark">
    <div class="container">
    <header class="header">
  <div class="title">
      <a href="/" class="logo">Tit1e</a>
      <div class="btn-dark"></div>
      <script>
        let bodyClx = document.body.classList;
        let btnDark = document.querySelector('.btn-dark');
        let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
        let darkVal = localStorage.getItem('dark');

        let setDark = (isDark) => {
        bodyClx[isDark ? 'add' : 'remove']('dark');
        localStorage.setItem('dark', isDark ? 'yes' : 'no');
        };

        setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
        requestAnimationFrame(() => bodyClx.remove('not-ready'));

        btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
        sysDark.addEventListener('change', (event) => setDark(event.matches));
      </script>
  </div>
    <ul class="menu">
        
        
        
        
        <li class="menu-item ">
            <a href="/" class="menu-item-link">Home</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/archives/" class="menu-item-link">Archives</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/atom.xml" class="menu-item-link">RSS</a>
        </li>
        
        
        <li class="menu-item ">
            <a target="_blank" rel="noopener" href="https://pixeltimer.art" class="menu-item-link">Pixel Timer</a>
        </li>
        
    </ul>
    <div class="search-box">
        <input type="search" id="search" placeholder="搜索">
    </div>
</header>
    <article class="post">
  <div class="post-meta">
    <span class="post-time">3 / 4, 2017</span>
  </div>
  <div class="post-title">
    <h1 class="title">JavaScript高级程序设计笔记（一）</h1>
  </div>
  
  <ul class="post-tags">
    
    <li class="tag-item">
      #学习
    </li>
    
  </ul>
  
  <div class="post-content">
    <p>「JavaScript高级程序」这本书知道的不用说太多。但是这书厚得跟板砖一样，而且长时间阅读又枯燥无味，啃下来的确很难。这段时间打算把JS原生捡起来复习一遍，因为jQuery用的太多导致原生都快忘光了。以后笔记可能会做的比较精炼，这里就记一些比较重点的东西。</p>
<h4 id="完整的JavaScript组成"><a href="#完整的JavaScript组成" class="headerlink" title="完整的JavaScript组成"></a>完整的JavaScript组成</h4><ul>
<li><code>ECMAScript</code>（核心）</li>
<li><code>DOM</code>（文档对象模型）</li>
<li><code>BOM</code>（浏览器对象模型）</li>
</ul>
<p>但在通常人们口中所说的JavaScript常常指的是ECMAScript。</p>
<span id="more"></span>
<h4 id="插入JavaScript代码方法"><a href="#插入JavaScript代码方法" class="headerlink" title="插入JavaScript代码方法"></a>插入JavaScript代码方法</h4><ul>
<li>通过<code>&lt;script&gt;&lt;/script&gt;</code>标签直接在网页中写JS代码</li>
</ul>
<pre><code class="javascript">   &lt;script type=&quot;text/javascript&quot;&gt;
       // code...
    &lt;/script&gt;
</code></pre>
<ul>
<li>通过<code>&lt;script&gt;</code>标签的<code>src</code>属性引入外部JS代码</li>
</ul>
<pre><code class="javascript">    &lt;script type=&quot;text/javascript&quot; src=&quot;url&quot;&gt;&lt;/script&gt;
</code></pre>
<p><strong>注：为了不影响网页的加载速度，JS代码一般放在网页尾部。</strong></p>
<h4 id="JavaScript基本概念"><a href="#JavaScript基本概念" class="headerlink" title="JavaScript基本概念"></a>JavaScript基本概念</h4><ul>
<li><p>区分大小写</p>
<ul>
<li>JavaScript中的变量，函数名或操作符都区分大小写</li>
</ul>
</li>
<li><p>标识符</p>
<ul>
<li>标识符：指的是JS代码中的变量、函数、属性、函数参数的名字</li>
<li>标识符的<strong>第一个字符</strong>必须是字母、下划线(_)或者美元符号($)</li>
<li>标识符的<strong>其他组成</strong>可以是字母、下划线、美元符号或者数字</li>
<li>一般情况下标识符采用驼峰法命名，如myPage、helloWorld</li>
</ul>
</li>
<li><p>注释</p>
<ul>
<li><p>单行注释 </p>
<ul>
<li><code>//单行注释</code></li>
</ul>
</li>
<li><p>多行注释</p>
<ul>
<li><pre><code>/*
 *多行注释
 *多行注释
 *／
</code></pre>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式</h4><ul>
<li><p>全局使用严格模式</p>
<ul>
<li>脚本顶部加入<code>&#39;use strict&#39;;</code></li>
</ul>
</li>
<li><p>函数内使用严格模式</p>
<ul>
<li><pre><code>function fn()&#123;
  &#39;use strict&#39;;
  //code...
&#125;
</code></pre>
</li>
</ul>
</li>
</ul>
<h4 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h4><ul>
<li>变量声明<ul>
<li>var定义的变量会成为定义这个变量作用域中的局部变量（在全局中声明就是全局对象，在函数中声明，函数执行完成后变量自行销毁）</li>
<li>不用var声明的变量，无论在函数内或函数外声明，都是全局变量</li>
<li>可以一次声明多个变量，用<code>,</code>隔开：<code>var a = 1,b = &quot;123&quot;,c = true;</code></li>
</ul>
</li>
<li>JavaScript的变量是松散类型，所以通过重新赋值可以改变变量的类型</li>
</ul>
<pre><code class="javascript">var a = 1;
typeof a;  //number，typeof操作符下文数据类型中有解释
a = &quot;你好&quot;;
typeof a;  //string
</code></pre>
<p>  <strong>在实际开发中不建议直接改变某个变量的类型。</strong></p>
<h4 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h4><ul>
<li>JavaScript中有五种基本数据类型和一种复杂数据类型<ul>
<li>Undefined</li>
<li>Null</li>
<li>Boolean</li>
<li>Number</li>
<li>String</li>
<li>Object(复杂类型)</li>
</ul>
</li>
<li>typeof操作符用于检测变量的数据类型，返回的类型有以下几种<ul>
<li><code>&#39;undefined&#39;</code></li>
<li><code>&#39;boolean&#39;</code></li>
<li><code>&#39;string&#39;</code></li>
<li><code>&#39;number&#39;</code></li>
<li><code>&#39;object&#39;</code></li>
<li><code>&#39;function&#39;</code></li>
</ul>
<pre><code class="javascript">typeof null  //&#39;object&#39;
typeof &#123;&#125;  //&quot;object&quot;
typeof []  //&quot;object&quot;
typeof undefined  //&quot;undefined&quot;
typeof &quot;你好&quot;  //&quot;string&quot;
typeof 1  //&quot;number&quot;
typeof NaN  //&quot;number&quot;
typeof function a()&#123;&#125;  //&quot;function&quot;
typeof true  //&quot;boolean&quot;
</code></pre>
<p>由上代码可以看出typeof操作符并不是可以非常准确地返回数据的类型。那么如何区分<code>null</code>、<code>[]</code>、<code>&#123;&#125;</code>的数据类型呢？<br>我们可以用<code>Object.prototype.toString.call(变量)</code>来区分：</p>
<pre><code class="javascript">Object.prototype.toString.call([])  //&quot;[object Array]&quot;
Object.prototype.toString.call(&#123;&#125;)  //&quot;[object Object]&quot;
Object.prototype.toString.call(null)  //&quot;[object Null]&quot;
Object.prototype.toString.call(NaN)  //&quot;[object Number]&quot;
Object.prototype.toString.call(1)  //&quot;[object Number]&quot;
</code></pre>
<p>我们发现<code>NaN</code>和<code>1</code>还是无法区分，那么这个又怎么区分呢？<br>我们可以用一个专门用来辨别<code>NaN</code>的方法来区分：</p>
<pre><code class="javascript">isNaN(NaN)  //true
isNaN(1)  //false
</code></pre>
</li>
</ul>
<h4 id="Null类型"><a href="#Null类型" class="headerlink" title="Null类型"></a>Null类型</h4><ul>
<li><code>Null</code>类型只有一个值：<code>null</code></li>
<li><code>null</code>是一个空对象指针，用<code>typeof</code>检测返回object</li>
<li>当一个变量将来要储存为对象的时候，最好先将这个变量设置为<code>null</code></li>
<li>null &#x3D;&#x3D; undefined</li>
</ul>
<h4 id="Boolean类型"><a href="#Boolean类型" class="headerlink" title="Boolean类型"></a>Boolean类型</h4><ul>
<li>Boolean类型只有true和false两个值</li>
<li><code>true == 1</code>，<code>false == 0</code>，但是true不一定等于1，false也不一定等于0</li>
<li>JavaScript中的任何一个值都可以通过<code>Boolean()</code>方法转换为Boolean值。<ul>
<li>转换为true的值有：<ul>
<li>Boolean类型的<strong>true</strong></li>
<li>String类型的<strong>任何非空字符串</strong></li>
<li>Number类型的<strong>任何非零数值，包括无穷大</strong></li>
<li>Object类型的<strong>任何对像</strong>，包括{}，从中可以看出{}与null不同</li>
</ul>
</li>
<li>转换为false的值的有：<ul>
<li>Boolean类型的<strong>flase</strong></li>
<li>String类型的<strong>空字符串</strong></li>
<li>Number类型的<strong>0和NaN</strong></li>
<li>Object类型的<strong>null</strong></li>
<li>Undefined类型的<strong>undefined</strong></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="Number类型"><a href="#Number类型" class="headerlink" title="Number类型"></a>Number类型</h4><ul>
<li>Number类型可以用十进制表示，也可以用八进制和十六进制表示</li>
<li>用八进制表示时，如果含有数字超过8则会被解析成十进制</li>
<li>算数计算事八进制和十六进制都会被转换成十进制数值</li>
<li>浮点数，即带小数的数值<ul>
<li>浮点数的两种写法</li>
</ul>
<pre><code class="javascript"> var floatNum1 = 0.1;
 var floatNum2 = .1;//这种写法有效，但是不推荐
</code></pre>
<ul>
<li>下列两种情况下，浮点会被转换成整数保存</li>
</ul>
<pre><code class="javascript">var floatNum1 = 1.; // 小数点后面没有数字——解析为 1 
var floatNum2 = 10.0; // 整数——解析为 10
</code></pre>
</li>
<li>浮点数支持科学计数法表示</li>
<li>浮点数最高精确度是17位小数</li>
<li>JavaScript最小能表示的数值为<code>5e-324</code></li>
<li>JavaScript最大能表示的数值为<code>1.7976931348623157e+308</code>，如果超出这个范围会被转换成<code>Infinity</code>（正无穷），如果这个值是负的，那就被转换成<code>-Infinity</code>（负无穷）</li>
<li>0除以0会得到<code>NaN</code>，<strong>并且<code>NaN</code>不等于<code>NaN</code></strong></li>
<li><code>number()</code>、<code>parseInt()</code>、<code>parseFloat()</code>可以把非数值转换成数值<ul>
<li><code>number()</code>转换规则：<ul>
<li><code>Boolean</code>类型的<code>true</code>和<code>false</code>会被转换成0和1</li>
<li><code>Number</code>类型返回传入的值</li>
<li><code>Null</code>类型的<code>null</code>返回0</li>
<li><code>Undefined</code>类型的值返回NaN</li>
<li><code>String</code>类型的如果只有数字，包括浮点数、八进制表示的、十进制表示的，负数，都会被转换成对应的十进制数值，如果包含其他字符，则返回NaN，空字符串返回0</li>
</ul>
</li>
<li><code>parseInt()</code>转换规则<ul>
<li><code>parseInt()</code>可用来提取字符串中的有效数字</li>
</ul>
<pre><code class="javascript">var num1 = parseInt(&quot;1234blue&quot;);  // 1234
var num2 = parseInt(&quot;&quot;);  // NaN
var num3 = parseInt(&quot;0xA&quot;);  // 10(十六进制数)
var num4 = parseInt(22.5);  // 22  小数点不是数字，所以遇到小数点停止解析
var num5 = parseInt(&quot;070&quot;);// 56(八进制数)
var num6 = parseInt(&quot;70&quot;);  // 70(十进制数)
var num7 = parseInt(&quot;0xf&quot;);  // 15(十六进制数)
var num8 = parseInt(&quot;a123&quot;)  //NaN  遇到非数字就停止解析
var num8 = parseInt(&quot;  123&quot;)  //123  前面空格会被忽略
</code></pre>
<ul>
<li><code>parseInt()</code>可以指定传入的数字的进制</li>
</ul>
<pre><code class="javascript">var num1 = parseInt(&quot;AF&quot;, 16);  //175
var num2 = parseInt(&quot;AF&quot;);  //NaN
var num3 = parseInt(&quot;10&quot;, 2);  //2 (按二进制解析)
var num4 = parseInt(&quot;10&quot;, 8);  //8 (按八进制解析)
var num5 = parseInt(&quot;10&quot;, 10);  //10(按十进制解析)
var num6 = parseInt(&quot;10&quot;, 16);  //16(按十六进制解析)
</code></pre>
</li>
<li><code>parseFloat()</code>转换规则<ul>
<li><code>parseFloat()</code>只能解析十进制</li>
<li>十六进制格式的字符串始终会被转换成0</li>
<li><code>parseFloat()</code>转换</li>
</ul>
<pre><code class="javascript">var num1 = parseFloat(&quot;1234blue&quot;);  //1234 (整数)
var num2 = parseFloat(&quot;0xA&quot;);  //0
var num3 = parseFloat(&quot;22.5&quot;);  //22.5
var num4 = parseFloat(&quot;22.34.5&quot;);  //22.34
var num5 = parseFloat(&quot;0908.5&quot;);  //908.5
var num6 = parseFloat(&quot;3.125e7&quot;);  //31250000
</code></pre>
</li>
</ul>
</li>
</ul>
<h4 id="String类型"><a href="#String类型" class="headerlink" title="String类型"></a>String类型</h4><ul>
<li>String 类型用于表示由零或多个 16 位 Unicode 字符组成的字符序列，即字符串</li>
<li>字符串可以由单引号(‘)或者双引号(“)表示，但是前后引号必须对应</li>
<li>\用于转义</li>
<li>字符串创建后是不可变的，要改变某个字符串的内容，必须先销毁原字符串</li>
<li><code>toString()</code>方法用于将其他类型的值转换为字符串类型，除了<code>null</code>和<code>undefined</code><ul>
<li>例：</li>
</ul>
<pre><code class="javascript">(11).toString();  //&quot;11&quot;  使用()将数字包裹起来
11..toString();  //&quot;11&quot;  因为第一个点会被解析为小数点，第二个点才是调用方法
true.toString();  //&quot;true&quot;
</code></pre>
</li>
<li><code>toString()</code>可以传入参数，但是只有在对数字使用<code>toString()</code>时才可以传入参数，传的参数是返回的字符串中的数字用什么进制数表示<ul>
<li>例：</li>
</ul>
<pre><code class="javascript">var num = 10;
num.toString();  //&quot;10&quot;
num.toString(2);  //&quot;1010&quot;
num.toString(8);  //&quot;12&quot;
num.toString(10);  //&quot;10&quot;
num.toString(16);  //&quot;a&quot;
</code></pre>
</li>
<li><code>String()</code>方法可以将包括null和undefined在在内的所有数据类型转换为字符串类型。<ul>
<li>如果值有 <code>toString()</code>方法，则调用该方法(没有参数)并返回相应的结果;</li>
<li>如果值是 <code>null</code>，则返回”null”;</li>
<li>如果值时 <code>undefined</code>，则返回”undefined”;</li>
</ul>
</li>
</ul>
<h4 id="Object类型"><a href="#Object类型" class="headerlink" title="Object类型"></a>Object类型</h4><ul>
<li>创建对象<ul>
<li>例：</li>
</ul>
<pre><code class="javascript">var obj1 = new Object();
var obj2 = new Object;  //不推荐这种方法
</code></pre>
</li>
<li>Object是所有对象的基础<code>Object</code>的每个实例都具有下列属性和方法<ul>
<li><code>constructor</code>:保存着用于创建当前对象的函数。对于前面的例子而言，构造函数(<code>constructor</code>)就是 <code>Object()</code>。</li>
<li><code>hasOwnProperty(propertyName)</code>:用于检查给定的属性在当前对象实例中(而不是在实例 的原型中)是否存在。其中，作为参数的属性名(<code>propertyName</code>)必须以字符串形式指定(例 如:<code>o.hasOwnProperty(&quot;name&quot;)</code>)</li>
<li><code>isPrototypeOf(object)</code>:用于检查传入的对象是否是传入对象的原型</li>
<li><code>toLocaleString()</code>:返回对象的字符串表示，该字符串与执行环境的地区对应</li>
<li><code>toString()</code>:返回对象的字符串表示</li>
<li><code>valueOf()</code>:返回对象的字符、串布尔值、或数值。</li>
</ul>
</li>
</ul>

  </div>
  <div class="post-near">
    
    <a
      class="post-near-prev"
      href="/p/5e4d0204.html"
      title="JavaScript高级程序设计笔记（二）"
    >
      <span class="arrow">←</span>
      <span class="post-near-title">
        JavaScript高级程序设计笔记（二）
      </span>
    </a>
    
    
    <a
      class="post-near-next"
      href="/p/b079cd31.html"
      title="apply和call的区别"
    >
      <span class="post-near-title">
        apply和call的区别
      </span>
      <span class="arrow">→</span>
    </a>
    
  </div>
</article>

    <footer class="footer">
  <p>本博客采用 <a class="license-link" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际</a>协议进行许可</p>
  <p>
    <span>Thanks For <a target="_blank" rel="noopener" href="https://github.com/nanxiaobei/hugo-paper" taget="_blank">hugo-paper</a></span>
    <span style="margin-left: 10px;">&copy; 2016-2025 by Tit1e</span>
  </p>
</footer>
    </div>
    <script src="//unpkg.com/@highlightjs/cdn-assets@11.5.0/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
  var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?6349d3bc54baea0b04a65145c5e3b799";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    })();
    const block = document.querySelectorAll('.post-content')[0]
    block.addEventListener('click', e => {
        const {nodeName, src} = e.target
        if(nodeName !== 'IMG') return
        document.body.classList.add('overflow-hidden')
        const div = document.createElement('div')
        div.id = 'global-cover'
        div.title = '点击关闭'
        const a = document.createElement('a')
        a.href = src
        a.target="_blank"
        a.title = '点击打开原图'
        const img = document.createElement('img')
        img.className = 'show-pic'
        img.src = src
        a.appendChild(img)
        div.appendChild(a)
        document.body.appendChild(div)
    })
    document.body.addEventListener('click', e => {
        if(e.target.id === 'global-cover'){
            document.body.classList.remove('overflow-hidden')
            document.body.removeChild(e.target)
        }
    })
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7M04VN3JZ4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-7M04VN3JZ4');
</script>

<script src="/js/search.js"></script>


</body>
</html>